import React, { useState, useEffect } from 'react'
import { Space, Swiper } from '@/components/UiComponents';
import { View, RichText } from '@tarojs/components'
import Tabs from '@/components/Tabs';
import { backgroundObj } from '@/utils/utils'
import Router from '@/utils/router'
import "taro-ui/dist/style/components/icon.scss";
import 'taro-ui/dist/style/components/accordion.scss'
import { AtAccordion, AtList, AtListItem } from 'taro-ui'
import 'taro-ui/dist/style/components/accordion.scss'
import "taro-ui/dist/style/components/list.scss";
import { CopyToClipboard, formatRichText, handleLink } from '@/utils/utils'
const offline = (props) => {
  const { data = {}, } = props
  const { goodsBaseInfo = {}, goodsContentList = [], materialInfoList = [] } = data
  const { price, skuHighPrice, goodsName, goodsDesc, picture = '', priceType, content, goodsType } = goodsBaseInfo
  const [activeKey, setActiveKey] = useState('')
  const [tabList, setTabList] = useState([])
  const [materialInfoVisible, setMaterialInfoVisible] = useState(true)
  const [videoVisible, setVideoVisible] = useState({})
  console.log(materialInfoList)
  useEffect(() => {
    if (goodsContentList.length !== 0 && materialInfoList.length !== 0) {
      setTabList([{ label: '目录', value: 'goodsContent' }, { value: 'materialInfo', label: '资料' }])
      setActiveKey('goodsContent')
    }
    else if (goodsContentList.length !== 0) {
      setTabList([{ label: '目录', value: 'goodsContent' }])
      setActiveKey('goodsContent')
    }
    else if (materialInfoList.length !== 0) {
      setTabList([{ value: 'materialInfo', label: '资料' }])
      setActiveKey('materialInfo')
    }
    else {
      setTabList([{ value: 'detail', label: '详情' }])
      setActiveKey('detail')
    }
  }, [data])
  console.log(materialInfoVisible, '1231233')
  const Tag = () => {
    return <View className='shopDetail_tag_red'>已购</View>
  }
  const renderIcon = (type, url) => {

    if (type === 'image') {
      return 'file-png'
    } else if (type === 'video') {
      return 'file-video'
    } else if (type === 'voice') {
      return 'file-audio'
    }
    else if (type === 'ebook') {
      return 'file-new'
    } else {
      function getFileExtension(fileName) {
        // 使用正则表达式匹配文件名中的后缀部分
        const regex = /(?:\.([^.]+))?$/;
        const result = regex.exec(fileName);

        // 提取匹配到的后缀，如果没有后缀则返回空字符串
        const extension = result ? result[1] : '';

        return extension;
      }
      return `file-${getFileExtension(url)}`
    }
  }
  const RenderShopCard = (props) => {
    const { data } = props
    const { goodsName, goodsCover, startTime, firstVideoId, goodsId, secondVideoId, liveStatus } = data
    return <View className='renderShopCard_box' onClick={() => {
      if (goodsType === 'liveCourse') {
        Router('shopDetail', {
          args: {
            goodsId: goodsId,
            goodsType: data.goodsType
          }
        })
      }
      else {
        Router('videoDetails', {
          args: {
            firstVideoId: firstVideoId,
            goodsId: goodsId,
            secondVideoId: secondVideoId,
            goodsType: data.goodsType
          }
        })
      }

    }
    }>
      <View className='renderShopCard_profile' style={backgroundObj(goodsCover)}></View>
      <View className='renderShopCard_content'>
        <View> {goodsName}</View>
        {goodsType === 'liveCourse' && liveStatus === '1' && <> <View className='renderShopCard_content_live'> 直播中</View> <View className='renderShopCard_content_time'>直播时间：{startTime}</View></>}

      </View>
    </View>
  }
  console.log(videoVisible)
  const renderContent = {
    goodsContent: <View> {goodsContentList.map((item, index) => {
      const { sectionId, sectionName, sectionGoodsList = [] } = item
      if (sectionName && sectionId) {
        console.log(typeof videoVisible[index])
        return <AtAccordion
          open={typeof videoVisible[index] === 'undefined' ? true : videoVisible[index]}
          onClick={(e) => {
            if (typeof videoVisible[index] === 'undefined') {
              setVideoVisible({
                ...videoVisible,
                [index]: false
              })
            } else {
              setVideoVisible({
                ...videoVisible,
                [index]: e
              })
            }
          }}
          key={sectionId} title={sectionName}
        >
          <AtList hasBorder={false}>
            {sectionGoodsList.map((val, o) => {
              return <RenderShopCard key={o} data={val}></RenderShopCard>
            })}
          </AtList>
        </AtAccordion>

      }
      else {
        return <RenderShopCard key={index} data={item}></RenderShopCard>
      }
    })}</View>,
    materialInfo: <AtAccordion
      open={materialInfoVisible}
      onClick={(open) => setMaterialInfoVisible(open)}
      title='资料列表'
    >
      <AtList hasBorder={false}>
        {materialInfoList.map((item, index) => {
          const { materialName, contentType, content } = item
          const { url } = JSON.parse(content);
          return <AtListItem
            onClick={() => handleLink(contentType, url)}
            key={index}
            title={materialName}
            iconInfo={{ value: renderIcon(contentType, url) }}
          />
        })}
      </AtList>
    </AtAccordion>,
    detail: <RichText nodes={formatRichText(content)} className='RichText_box'></RichText>
  }[activeKey]
  return (
    <View className='PayShopDetail_box'>
      <Swiper className='ShopDetail_swiper_box' tagDom={<Tag></Tag>} list={picture.split(',')}></Swiper>
      <View className='ShopDetail_content'>
        <View className='ShopDetail_content_title'>{goodsName} </View>
        <View className='ShopDetail_content_desc'>{goodsDesc}</View>
      </View>
      <View className='ShopDetail_rectText'>
        <Tabs classname='tan_classname' list={tabList} stretch={false} onChange={(e) => { setActiveKey(e) }} activeKey={activeKey}>
        </Tabs>
        <Space style={{ width: '100%' }} direction='vertical'>
          {renderContent}
        </Space>
      </View>
    </View>
  )
}
export default offline